<template>
    <div class="dropCheckboxGroup">
        <el-dropdown :trigger="trigger">
            <el-button :type="btType">
                <i :class="iconClass"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" class="columnDropMenu">
                <!-- <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item> -->
                <template>
                    <el-checkbox-group
                        v-model="checkList"
                        @change="handleCheckedChange">
                        <el-checkbox
                            v-for="item in checkOptions"
                            :label="item"
                            :key="item"></el-checkbox>
                    </el-checkbox-group>
                </template>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
    import Vue from 'vue'
    import { Button,
            Dropdown,
            DropdownMenu,
            DropdownItem,
            CheckboxGroup,
            Checkbox
           } from 'element-ui' 
    Vue.use(Button)
    Vue.use(Dropdown)
    Vue.use(DropdownMenu)
    Vue.use(DropdownItem)
    Vue.use(CheckboxGroup)
    Vue.use(Checkbox)
    
    export default {
        data() {
             return {
                 checkList:[]
             }
        },
        props:{
            trigger:{
                default:'hover'
            },
            btType:{
                default:''
            },
            iconClass:{
                default:'el-icon-menu'
            },
            checkOptions:{
                default:[]
            }
        },
        methods:{
            handleCheckedChange:function(v){
                if(this.$attr.handleCheckedChange){
                    this.$attr.handleCheckedChange(v)
                }
            }
        },
        mounted:function(){
        }
    }
</script>

<style scoped>
    .columnDropMenu{
        padding:10px;
    }
</style>
<style>
    /*修改element-ui样式*/
    .columnDropMenu .el-checkbox{
        display: block;
        margin:5px 0;
    }
    .columnDropMenu .el-checkbox+.el-checkbox{
        margin-left:0;
    }
</style>